/**
* Created by liuyi on 2020-06-02
*
* 搜索栏公共组件
*/
<template>
  <div class="search-form-box">
    <el-row :gutter="4">
      <el-col :span="20">
        <el-form
          ref="formRef"
          :model="formData"
          label-width="80px"
          label-position="right"
          :inline="true"
        >
          <el-row v-for="(formOption, index1) in formOptionsArr" :key="index1">
            <el-col v-for="(item, index) in formOption" :key="newKeys[index]" :span="8">
              <el-form-item
                :prop="item.prop"
                :label="item.label ? (item.label + '：') : ''"
                :rules="item.rules"
              >
                <formItem
                  v-model="formData[item.prop]"
                  :item-options="item"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="4">
        <div class="btn-box">
          <el-button
            v-if="btnItems.includes('search')"
            size="mini"
            type="primary"
            class="btn-search"
            @click="onSearch"
          >搜索</el-button>

          <el-button
            v-if="btnItems.includes('export')"
            size="mini"
            type="primary"
            class="btn-export"
            @click="onExport"
          >导出</el-button>

          <el-button
            v-if="btnItems.includes('reset')"
            size="mini"
            type="default"
            class="btn-reset"
            @click="onReset"
          >重置</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import formItem from './formItem'
import { createUniqueString } from '@/utils/tools'

export default {

  components: { formItem },
  props: {
    formOptions: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    // 提交按钮项，多个用逗号分隔（query, export, reset）
    btnItems: {
      type: String,
      default() {
        return 'search'
      }
    }
  },

  data() {
    return {
      formData: {}
    }
  },

  computed: {
    newKeys() {
      return this.formOptions.map(v => {
        return createUniqueString()
      })
    },
    formOptionsArr() {
      const arr = []
      let rowData = []
      this.formOptions.forEach(item => {
        rowData.push(item)
        if (rowData.length % 3 === 0) {
          arr.push(rowData)
          rowData = []
        }
      })
      arr.push(rowData)
      return arr
    }
  },

  created() {
    this.addInitValue()
  },

  methods: {
    // 校验
    onValidate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          callback()
        }
      })
    },
    // 搜索
    onSearch() {
      this.onValidate(() => {
        this.$emit('onSearch', this.formData)
      })
    },
    // 导出
    onExport() {
      this.onValidate(() => {
        this.$emit('onExport', this.formData)
      })
    },
    onReset() {
      this.$refs.formRef.resetFields()
      this.$emit('onReset')
    },
    // 添加初始值
    addInitValue() {
      const obj = {}
      this.formOptions.forEach(v => {
        if (v.initValue !== undefined) {
          obj[v.prop] = v.initValue
        }
      })
      this.formData = obj
    }
  }
}
</script>

<style lang='less' scoped>
  /deep/.el-input--mini .el-input__inner{
    width: 200px;
  }
  .search-form-box {
    margin-bottom: 15px;

    .btn-box {
      padding-top: 5px;
      display: flex;
      float: right;
      button {
        height: 28px;
      }
    }
    .el-form {
      /deep/ .el-form-item__label {
        padding-right: 0;
      }
      .el-form-item {
        margin-bottom: 0;

        &.is-error {
          margin-bottom: 22px;
        }
      }
    }
  }

</style>
